<template lang="pug">
  DataTablePage(
    ref="tablePage"
    mainColumn="name"
    longColumn="remark"
    resource="/dxbase/rbac/user"
    title="用户管理"
    label="用户"
    labelName="loginName"
    :toolbar="toolbar"
    :operation="operation"
    :operationWidth="150"
    :tableFullList="tableFullList"
    :tableInitList="tableInitList"
    :filterFullList="filterFullList"
    :filterInitList="filterInitList"
    :createList="createList"
    :updateList="updateList"
    :createFormValues="createFormValues"
    :createButtonList="createButtonList"
    :columnGroupBy="[]"
    :columns="columns")
    SmartDialog(
      v-if="resetDialogShow"
      v-model="resetDialogVisible"
      size="md"
      :title="resetDialogLabel")
      SmartForm(
        class="dialogform"
        :formList="resetList"
        :columns="columns"
        :values="resetDialogFormValues"
        :buttonList="resetButtonList")
</template>

<script>
import SmartDialog from '@/components/SmartDialog'
import DataTablePage from '@/containers/DataTablePage'
import { toolbarCreate } from '@/containers/DataTablePage/toolbar'
import { operationUpdate, operationDelete } from '@/containers/DataTablePage/operation'
import { encrypt } from '@/utils/common'
import { checkActions } from '@/utils/auth'
import SmartForm from '@/components/SmartForm'
import config from '../config/account'

function operationEventReset ({funcProps}) {
  const { data, account } = funcProps
  account.resetDialogId = data.id
  account.resetDialogLabel = '重置密码' + '【' + data.loginName + '】'
  account.resetDialogVisible = true
  account.resetDialogFormValues = {}
}

export default {
  name: 'account',
  components: {
    SmartDialog,
    DataTablePage,
    SmartForm
  },
  data () {
    const hasUpdate = checkActions('/system/#/account/update')
    const hasDelete = checkActions('/system/#/account/delete')
    const hasReset = checkActions('/system/#/account/resetPassword')
    const hasUnBlock = checkActions('/system/#/account/unBlock')
    return {
      ...config,
      toolbar: [{
        ...toolbarCreate,
        isShow () {
          return checkActions('/system/#/account/create')
        }
      }],
      operation: [{
        ...operationUpdate,
        isShow () {
          return hasUpdate
        }
      }, {
        ...operationDelete,
        isShow () {
          return hasDelete
        }
      }, {
        name: 'reset',
        label: '重置密码',
        icon: 'password',
        tooltip: true,
        funcProps: {
          account: this
        },
        func: operationEventReset,
        isShow () {
          return hasReset
        }
      }, {
        name: 'unBlock',
        label: '解绑用户',
        icon: 'unlink',
        tooltip: true,
        funcProps: {
          account: this
        },
        func ({funcProps}) {
          const { data, account } = funcProps
          account.$put({
            url: `/dxbase/rbac/user/resetInvalidLoginCount`,
            data: {
              ids: [data.id],
              invalidLoginCount: 0
            }
          }).then(data => {
            account.$refs.tablePage.getData()
          })
        },
        isShow () {
          return hasUnBlock
        }
      }],
      createButtonList: [{
        name: 'submit',
        label: '提交',
        type: 'complete',
        validate: true,
        funcProps: {
          account: this
        },
        func ({funcProps}) {
          const { form, button, account } = funcProps
          button.loading = true
          const table = account.$refs.tablePage
          table.$post({
            url: table.resource,
            data: {
              ...form.formValues,
              loginPassword: encrypt(form.formValues.loginPassword)
            }
          }).then(data => {
            button.loading = false
            if (data) {
              table.getData()
              table.dialogVisible = false
            }
          })
        }
      }],
      resetDialogVisible: false,
      resetDialogLabel: '重置密码',
      resetList: ['newPassword'],
      resetButtonList: [{
        name: 'reset',
        label: '重置密码',
        icon: 'key',
        funcProps: {
          account: this
        },
        validate: true,
        func ({funcProps}) {
          const { form, account } = funcProps
          account.$put({
            url: `/dxbase/rbac/user/resetPassword/${account.resetDialogId}`,
            data: {
              newPassword: encrypt(form.formValues.newPassword)
            }
          }).then(data => {
            account.$refs.tablePage.getData()
            account.resetDialogVisible = false
          })
        }
      }],
      resetDialogFormValues: {
        newPassword: ''
      },
      createFormValues: {
        loginName: '',
        loginPassword: '',
        name: '',
        roleIds: [],
        enabled: false,
        remark: ''
      }
    }
  },
  computed: {
    resetDialogShow () {
      return this.resetDialogVisible
    }
  }
}
</script>
<style scoped lang="sass">
.dialogform
  padding: 16px
</style>
